<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch, computed } from 'vue'
/* 行列输入框 */
interface Props {
  modelValue?: Array<any>
  formItem?: any
  disabled?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
})
const emit = defineEmits(['update:modelValue'])
const inputValue: any = computed({
  get() {
    return Array.isArray(props.modelValue) ? props.modelValue : []
  },
  set(val) {
    emit('update:modelValue', val)
  },
})
// 行
const hValue = ref<number>(props.modelValue?.length ? props.modelValue[0] : 0)
// 列
const lValue = ref<number>(props.modelValue?.length ? props.modelValue[1] : 0)
/* 行、列监听 */
watch(
  hValue,
  (val) => {
    inputValue.value = [val, lValue.value]
  },
  {
    deep: true,
  },
)

watch(
  lValue,
  (val) => {
    inputValue.value = [hValue.value, val]
  },
  {
    deep: true,
  },
)
/* 数据回填监听 */
watch(
  inputValue,
  (val) => {
    hValue.value = val[0]
    lValue.value = val[1]
  },
  {
    deep: true,
  },
)
</script>
<template>
  <div class="double-input-box">
    <!-- 行 -->
    <el-input-number
      v-model="hValue"
      :disabled="props.formItem?.disabled || disabled"
      :style="{ width: props.formItem?.tagParams.width || '50%' }"
      v-bind="props.formItem?.tagParams"
      :step="props.formItem?.step"
      :placeholder="props.formItem?.placeholder || ''"
    >
    </el-input-number>
    <!-- 列 -->
    <el-input-number
      v-model="lValue"
      :disabled="disabled"
      :style="{ width: props.formItem?.tagParams.width || '50%' }"
      v-bind="props.formItem?.tagParams"
      :step="props.formItem?.step"
      :placeholder="props.formItem?.placeholder || ''"
    >
    </el-input-number>
  </div>
</template>
<style lang="scss" scoped>
.double-input-box {
  width: 100%;
  height: 100%;
  .ep-input-number + .ep-input-number {
    margin-left: 10px;
  }
}
</style>
